<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/info-list.css"/><!--分享-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
    <title>图文快讯</title>
    <style>
        body {
            background-color: white;
        }

        .index-flash-tab-item {
            width: 2.25rem;
        }

        .info-flash-time-axis {

        }

        .index-flash-tab-s {
            color: #2C68FF;
        }

        .index-flash-tab-n {
            color: rgba(34, 34, 34, 0.45);
        }

        .index-flash-time {
            background-color: #F7F7F7;
            height: .68rem;
            line-height: .68rem;
            padding-left: .32rem;
            color: rgba(34, 34, 34, 0.7)
        }

        .index-flash-track-rcol {
            width: 100%;
        }

        .index-flash-track-list {
            position: relative;
        }

        .index-flash-track-list .index-flash-track-ul {
            padding-inline-start: 0.2rem;
            margin-right: 0.32rem;
        }

        .index-flash-track-list .index-flash-track-li {
            position: relative;
            padding: 0.12rem 0 0.4rem 0.18rem;
            line-height: 0.48rem;
            border-left: 1px solid #F0F0F0;
        }

        .index-flash-track-list .index-flash-track-li .node-icon {
            position: absolute;
            left: -0.10rem;
            top: 0.24rem;
            width: 0.18rem;
            height: 0.18rem;
            border: 2px solid #2C68FF;
            background-color: white;
            border-radius: 50px;
        }

        .index-flash-track-list .index-flash-track-li .time {
            margin-right: 0.32rem;
            position: relative;
            top: -0.04rem;
            display: inline-block;
            vertical-align: middle;
            color: rgba(34, 34, 34, 0.7);
        }

        .index-flash-track-list .index-flash-track-li .title {
            /*display: inline-block;*/
            vertical-align: middle;
            color: #222222;
        }

        .index-flash-track-list .content {
            margin-top: 0.24rem;
            padding: 0.18rem 0.24rem;
            background-color: #F7F8F9;
            color: rgba(34, 34, 34, 0.7);
            line-height: 0.42rem;
        }

        .index-flash-track-list .content span {
            color: #FF9523;
        }

        .index-flash-link {
            margin-top: 0.36rem;
            height: 1.24rem;
            padding: 0.2rem;
            background-color: #F7F8F9;
        }

        .index-flash-link-title {
            margin-right: 0.34rem;
            height: 0.96rem;
        }

        .index-flash-link-icon {
            color: #2C68FF;
        }

        .index-flash-link-icon span {
            border: 0.02rem solid #2C68FF;
            padding: 0.01rem 0.02rem;
            position: relative;
            top: -0.025rem;
        }

        .index-flash-link-img img {
            width: 0.96rem;
            height: 0.84rem;
        }

        .index-flash-img {
            margin-top: 0.24rem;
        }

        .index-flash-img-one {
            width: 3.2rem;
            height: 1.8rem;
        }

        .index-flash-img-more {
            width: 2.08rem;
            height: 2.08rem;
        }


        .index-flash-bottom {
            margin-top: 0.16rem;
        }

        .index-flash-bottom-box {
            display: flex;
            flex-wrap: wrap;
            height: 22px;
            overflow: hidden;
        }

        .index-flash-bottom-label {
            margin-right: 8px;
            padding: 0 15px;
            height: 22px;
            line-height: 22px;
            color: rgba(34, 34, 34, 0.45);
            background-color: #F7F8F9;
            border-radius: 15px;
        }

        .index-flash-bottom-icon {
            height: 22px;
        }

        .index-flash-pl {
            color: #222222;
            margin-right: 0.56rem;
        }

        .index-flash-fx {
            color: #222222;
        }
    </style>
</head>
<body>

<div class="flex-column ff400 h-100-p">

    <!--状态栏-->
    <div class="bg-main status-bar"></div>
    <!--导航栏-->
    <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
        <div class="left-bar" onclick="clickBack()">
            <span class="iconfont iconfanhui1 fspx16"></span>
        </div>
        <div class="center-bar">
            <div class="flex-row justify-content-center fspx16">
                <div class="index-flash-tab-item flex-column align-items-center" onclick="changeTab('004005001',this)">
                    <div class="index-flash-tab index-flash-tab-n">实时图文</div>
                </div>
                <div class="index-flash-tab-item flex-column align-items-center ff500" onclick="changeTab('004005002',this)">
                    <div class="index-flash-tab index-flash-tab-s">闪电快讯</div>
                </div>
            </div>
        </div>
        <div class="right-bar">
        </div>
    </div>
    <!--实时图文容器-->
    <div class="index-flash-time"></div>
    <div class="index-flash-kp flex-1 mescroll scoll-area" id="mescroll">
        <div class="flex-column info-flash-time-axis">
            <div class="index-flash-track-rcol ">
                <div class="index-flash-track-list">
                </div>
            </div>
        </div>
    </div>

</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<script src="../../plugin/mescroll/js/mescroll.min.js"></script>
<script>
  let meScroll
  let pm = {
    funcCode: '004005002',
    pageNum: 1,
    pageSize: 10,
    defaultImg: 'https://zzb.jddglobal.com/customer/manager/download/zzb/jpg/addf93df-df8c-43ec-b041-35a895b837f3.jpg',
    timeStamp: '',
    isScroll: false,
    flag: false,
    currDate: DateUtils.formatDate(new Date(), 'yyyy-MM-dd hh'),//滚动条显示的当前数据的日期
    lastHeight: 0,
    oldHeight: 0,
  }
  let funcCodes = [{funcCode: '004005001', name: '实时图文'}, {funcCode: '004005002', name: '闪电快讯'}]

  function initPage(params) {
    pm.funcCode = params.funcCode ? params.funcCode : pm.funcCode
    //状态栏自适应
    Utils.sbhAdaptive()

    asemblyPage()

    pageScroll()

    //下拉刷新、滚动加载
    meScroll = Template.createMeScroll({
      id: 'mescroll', //区域ID
      pageNum: pm[pm.funcCode].pageNum,
      downCallback: refreshAchive, //下拉刷新入口
      upCallback: getInfoListForWeb //滚动加载入口
    })
  }

  function reLoadPage() {
    $('.index-flash-track-list').html('')
    asemblyPage()
    getInfoListForWeb()
    pageScroll()
  }

  function refreshAchive() {
    pm[pm.funcCode] = {
      funcCode: pm.funcCode,
      pageNum: 1,
      pageSize: 10,
      lastDttm: DateUtils.getNowInt(),
      defaultImg: 'https://zzb.jddglobal.com/customer/manager/download/zzb/jpg/addf93df-df8c-43ec-b041-35a895b837f3.jpg',
      timeStamp: '',
      lastHeight: 0,
      scrollHeight: 0,
      isScroll: false,
      date: new Date(), //数据加载日期
      currDate: DateUtils.formatDate(new Date(), 'yyyy-MM-dd hh'),
      computeDate: DateUtils.formatDate(new Date(), 'yyyy-MM-dd hh'),//用于加载数据时，记录计算的日期
    }
    getInfoListForWeb()
  }

  function asemblyPage() {
    funcCodes.forEach(function (item) {
      pm[item.funcCode] = {
        funcCode: item.funcCode,
        pageNum: 1,
        pageSize: 10,
        lastDttm: DateUtils.getNowInt(),
        defaultImg: 'https://zzb.jddglobal.com/customer/manager/download/zzb/jpg/addf93df-df8c-43ec-b041-35a895b837f3.jpg',
        timeStamp: '',
        lastHeight: 0,
        scrollHeight: 0,
        isScroll: false,
        date: new Date(), //数据加载日期
        currDate: DateUtils.formatDate(new Date(), 'yyyy-MM-dd hh'),
        computeDate: DateUtils.formatDate(new Date(), 'yyyy-MM-dd hh'),//用于加载数据时，记录计算的日期
      }
      $('.index-flash-kp .index-flash-track-list').append('<div class="index-flash-track-ul index-flash-track-' + item.funcCode + '"></div>')
    })
  }

  //切换tab
  function changeTab(num, o) {
    pm.funcCode = num
    $('.index-flash-tab-item').removeClass('ff500')
    $(o).addClass('ff500')
    $('.index-flash-tab-item').find('.index-flash-tab').removeClass('index-flash-tab-s')
    $('.index-flash-tab-item').find('.index-flash-tab').addClass('index-flash-tab-n')
    $(o).find('.index-flash-tab').removeClass('index-flash-tab-n')
    $(o).find('.index-flash-tab').addClass('index-flash-tab-s')

    if (pm[pm.funcCode].currDate) {
      let week = DateUtils.getWeekDay(pm[pm.funcCode].date)
      $('.index-flash-time').html(pm[pm.funcCode].currDate + ' ' + week)
    }

    $('.index-flash-track-ul').hide()
    $('.index-flash-track-' + pm.funcCode).show()
    $('.scoll-area').animate({scrollTop: pm[pm.funcCode].scrollHeight}, 200)//动画效果
    if (pm[pm.funcCode].pageNum === 1 && Utils.isEmpty($('.index-flash-track-' + num).html())) {
      getInfoListForWeb()
    }
  }

  //快评列表
  function getInfoListForWeb() {
    Server.indexFlash.getNewsListForThird({
      funcCode: pm[pm.funcCode].funcCode,
      lastDttm: pm[pm.funcCode].lastDttm,
      pageNum: pm[pm.funcCode].pageNum,
      pageSize: pm[pm.funcCode].pageSize
    }).then(function (data) {
      dealKp(data)
    })
  }

  function dealKp(data) {
    let htmlStr = ''
    data.body.list.forEach(function (item, index) {
      htmlStr += dealChildKp(item, index)
    })
    $('.index-flash-track-ul').hide()
    $('.index-flash-track-' + pm.funcCode).show()
    if (pm[pm.funcCode].pageNum === 1) {
      $('.index-flash-track-' + pm.funcCode).html(htmlStr)
    } else {
      $('.index-flash-track-' + pm.funcCode).append(htmlStr)
    }

    pm[pm.funcCode].lastDttm = data.body.lastDttm
    pm[pm.funcCode].pageNum++

    meScroll.endSuccess(data.body.list.length, data.body.hasNextPage)
  }

  function dealChildKp(item, ind) {
    let jsonStr = JSON.stringify({
      infoId: item.infoId,
      infoType: item.infoType
    })

    let htmlStr = ''
    let dt = new Date(item.issuerDttm * 1000)
    let dtStr = DateUtils.formatDate(dt, 'yyyy年MM月dd日')
    if (pm[pm.funcCode].pageNum === 1 && ind === 0) {
      htmlStr += '<div style="width: 100%;" id=\'news_' + pm.funcCode + dtStr + '\'></div>'

      //计算时间，用于记录页面当前加载数据的最早日期
      pm[pm.funcCode].computeDate = dtStr
      //顶部显示时间
      pm[pm.funcCode].currDate = dtStr
      pm[pm.funcCode].date = dt
      let week = DateUtils.getWeekDay(dt)
      $('.index-flash-time').html(dtStr + ' ' + week)
    }

    //日期交替时，插入空行打标
    if (pm[pm.funcCode].computeDate !== dtStr) {
      htmlStr += '<div style="width: 100%;" id=\'news_' + pm.funcCode + dtStr + '\'></div>'
      pm[pm.funcCode].computeDate = dtStr
    }

    htmlStr += '<div class=\'index-flash-track-li flex-column\' onclick=\'goDetail(' + jsonStr + ')\'>\n'
    htmlStr += '<span class=\'node-icon\'></span>'
    htmlStr += '<span class=\'time fspx12\'>' + item.issuerDttmStr.substring(11, 16) + '</span>'
    // 快讯内容
    htmlStr += '<span class=\'title line4 fspx15 ff500\'>' + Utils.dealUndefined(item.mainTitle) + '</span>'
    // 快评内容
    if (item.trailContent && item.trailContent.trim()) {
      let linkInfo = ''
      if (item.trailContent.length > 150) {
        item.trailContent = item.trailContent.substring(0, 150)
        linkInfo = '...<span class=\'fspx13\'>阅读更多</span>'
      }
      let objList = item.trailContent.split('\n')
      htmlStr += '<div class=\'content fspx13 ff400\'>'
      for (let i = 0; i < objList.length; i++) {
        if (objList[i]) {
          if (i === objList.length - 1) {
            htmlStr += '<div>' + objList[i] + linkInfo + '</div>'
          } else {
            htmlStr += '<div>' + objList[i] + '</div>'
            htmlStr += '<div class="h-10-p"></div>'
          }
        }
      }
      htmlStr += '</div>'
    }
    // 快评链接
    if (item.infos && item.infos.length > 0) {
      htmlStr += '<div class=\'index-flash-link\'>'
      htmlStr += '<div class=\'flex-row\'>'
      htmlStr += '<div class=\'index-flash-link-title flex-row line2 flex-1 ff400\'>'
      htmlStr += '<span class=\'index-flash-link-icon iconfont iconlianjie2 fspx15 mr5 \'>'
      htmlStr += '</span>'
      htmlStr += '<span>' + item.infos[0].mainTitle + '</span>'
      htmlStr += '</div>'
      htmlStr += '<div class=\'index-flash-link-img\'>'
      htmlStr += '<img src=\'' + (item.infos[0].coverImgUrl ? item.infos[0].coverImgUrl : pm.defaultImg) + '\'/>'
      htmlStr += '</div>'
      htmlStr += '</div>'
      htmlStr += '</div>'
    }
    // 图片
    if (item.fileList && item.fileList.length > 0) {
      if (1 === item.fileList.length) {
        htmlStr += '<div class=\'index-flash-img flex-row\'>'
        htmlStr += '<img class=\'index-flash-img-one\' src=\'' + item.fileList[0] + '\'/>'
        htmlStr += '</div>'
      } else if (2 === item.fileList.length) {
        htmlStr += '<div class=\'index-flash-img flex-row\'>'
        htmlStr += ' <img class=\'index-flash-img-more mr10\' src=\'' + item.fileList[0] + '\'/>'
        htmlStr += ' <img class=\'index-flash-img-more mr10\' src=\'' + item.fileList[1] + '\'/>'
        htmlStr += '</div>'
      } else {
        htmlStr += '<div class=\'index-flash-img flex-row justify-content-between\'>'
        htmlStr += ' <img class=\'index-flash-img-more\' src=\'' + item.fileList[0] + '\'/>'
        htmlStr += ' <img class=\'index-flash-img-more\' src=\'' + item.fileList[1] + '\'/>'
        htmlStr += ' <img class=\'index-flash-img-more\' src=\'' + item.fileList[2] + '\'/>'
        htmlStr += '</div>'
      }
    }
    // 评论以及分享
    htmlStr += '<div class=\'index-flash-bottom flex-row justify-content-between align-items-center\'>'
    htmlStr += '<div class=\'index-flash-bottom-box flex-1 fspx12 \'>'
    if (item.infoLabel) {
      let split = item.infoLabel.split(/[,，]/)
      split.forEach(function (it, index) {
        if (index < 5) {
          htmlStr += '<div class=\'index-flash-bottom-label\'>' + it + '</div>'
        }
      })
    }
    htmlStr += '</div>'
    htmlStr += '<div class=\'index-flash-bottom-icon flex-row align-items-center ml10\'>'

    htmlStr += '<span class=\'index-flash-pl iconfont iconpinglun fspx16\' onclick=\'goCommentList(' + jsonStr + ')\'></span>'
    htmlStr += '<span class=\'index-flash-fx iconfont iconfenxiang1 fspx14\' onclick=\'dealShare("' + Utils.dealUndefined(item.detailImgUrl) + '","' + item.infoId + '")\'></span>'
    htmlStr += '</div>'
    htmlStr += '</div>'
    htmlStr += '</div>'
    return htmlStr
  }

  //弹窗分享
  function dealShare(url, infoId) {
    if (url && url.trim()) {
      let item = {
        type: 'image',
        image: url ? url.trim() : ''
      }
      Template.shareWindow(item)
      stopBubbling()
    } else {
      Server.infoIndex.getLoadShare({
        id: infoId
      }).then(function (data) {
        if (data.url) {
          url = data.url
          let item = {
            type: 'image',
            image: url ? url.trim() : ''
          }
          Template.shareWindow(item)
          stopBubbling()
        }
      })
      stopBubbling()
    }
  }


  //处理快讯日期
  function dealInfoDate() {

    let currDate = pm[pm.funcCode].currDate
    //当前显示的日期的偏移量
    let currTopHeight = 0
    let cdom = $('#news_' + pm.funcCode + currDate)
    if (Utils.notEmpty(cdom.offset())) {
      currTopHeight = cdom.offset().top
    }

    if (pm[pm.funcCode].lastHeight > pm[pm.funcCode].oldHeight) {//下拉
      //获取顶部显示日期的前一天
      let lastDate = getLastDate(pm[pm.funcCode].date, false, 1, pm.funcCode)
      let dom = $('#news_' + pm.funcCode + lastDate)
      if (Utils.notEmpty(dom.offset())) {
        //获取顶部显示日期的前一天的偏移量
        let lastTopHeight = dom.offset().top

        //高度处于两个日期之间，取大的日期
        if (lastTopHeight < 98) {
          pm[pm.funcCode].date = DateUtils.str2Date(lastDate.substr(0, 4) + '-' + lastDate.substr(5, 2) + '-' + lastDate.substr(8, 2))
          pm[pm.funcCode].currDate = lastDate
          let week = DateUtils.getWeekDay(pm[pm.funcCode].date)
          $('.index-flash-time').html(lastDate + ' ' + week)
        }
      }

    } else if (pm[pm.funcCode].lastHeight < pm[pm.funcCode].oldHeight) {//上滑
      let lastDate = getLastDate(pm[pm.funcCode].date, true, 1, pm.funcCode)
      let dom = $('#news_' + pm.funcCode + lastDate)
      if (Utils.notEmpty(dom.offset())) {
        let lastTopHeight = dom.offset().top

        //高度处于两个日期之间，取大的日期
        if (currTopHeight > 98) {
          pm[pm.funcCode].date = DateUtils.str2Date(lastDate.substr(0, 4) + '-' + lastDate.substr(5, 2) + '-' + lastDate.substr(8, 2))
          pm[pm.funcCode].currDate = lastDate
          let week = DateUtils.getWeekDay(pm[pm.funcCode].date)
          $('.index-flash-time').html(lastDate + ' ' + week)
        }
      }
    }
    pm[pm.funcCode].oldHeight = pm[pm.funcCode].lastHeight
  }

  function getLastDate(dt, flag, num, childCode) {
    let date = DateUtils.getLastDate(dt, num, flag)
    let lastDate = DateUtils.formatDate(date, 'yyyy年MM月dd日')
    //如果没获取到数据，则继续获取
    //处理日期不能超过当前日期,如果超过10天没数据，则不再计算，
    if (num < 10 && !$('#news_' + childCode + lastDate)[0]) {
      num ++
      lastDate = getLastDate(dt, flag, num, childCode)
    } else if (num >= 10) {
      lastDate = DateUtils.formatDate(dt, 'yyyy年MM月dd日')
    }
    return lastDate
  }

  //翻页
  function pageScroll() {
    $('.scoll-area').scroll(function () {

      pm[pm.funcCode].lastHeight = $(this).scrollTop()
      dealInfoDate()
    })
  }

</script>
</html>
